<!-- js脚本 -->
<!--角色-->
<script setup lang="ts">
import http from '@/http'
import { onMounted, ref, watch } from 'vue'
import { ElNotification } from 'element-plus'//导入消息提示框
import { fa } from 'element-plus/es/locale'
import { ElMessage } from 'element-plus'
const drawer3 = ref(false)
//控制修改抽屉开关
const drawer = ref(false)
// 双向绑定文本框
const input = ref('')
// 存储所有菜单的数据
const menuData = ref([])
//分配菜单的id
const rid=ref([])
//表格数据与方法
const handleClick = async(index: number, role) => {  
  rid.value=role.roleId
  //查询所有菜单(查询父菜单以及子菜单的层次结构的格式)
await  http.get("/menu/getMenu").then((res)=>{
  menuData.value=res
  console.log("成功")
})
//发送异步请求根据id查询角色拥有的子菜单
await http.get("/menu/getRoleMids?rid="+rid.value).then((res)=>{
  console.log("cc",res)
mids.value=res
console.log(mids.value)
})
  //打开抽屉
  drawer3.value=true;
}
// 监听drawer3控制抽屉开关
watch(drawer3,()=>{
  if(!drawer3.value){
    //清空默认选中框
    mids.value=[]
  }
})
//修改成功提示框
const open1 = () => {
  ElNotification({
    title: 'Success',
    message: '修改成功',
    type: 'success',
  })
}
//授权成功提示框
const open4 = () => {
  ElNotification({
    title: 'Success',
    message: '授权成功',
    type: 'success',
  })
}
//添加成功提示框
const open2A = () => {
  ElMessage({
    message: '添加成功',
    type: 'success',
  })
}
//添加失败提示框
const open3 = () => {
  ElMessage({
    message: '添加失败用户名密码不能为空',
    type: 'warning',
  })
}
// 修改失败提示框
const open2 = () => {
  ElNotification({
    title: 'Warning',
    message: '修改失败',
    type: 'warning',
  })
}
// 分页：当前页页号发生改变
const handleCurrentChange = (val: number) => {
  //修改当前页的页号
  pageNum.value = val
  //重新获取当前页的数据  
  getALlROle();
  console.log(`current page: ${val}`)
}
//当前页
let pageNum=ref(1)
//每页页数
let pagePage=ref(4)
//搜索框双向绑定
let uname=ref('')
//总页数
let pagePages=ref();
//总条数
let total=ref()
//
let pageSize=ref();

//封装查询所有角色信息的方法
function getALlROle(){
  //发送异步请求
  http.get("/role/getPageRoles",{
    params:{
        pageNum:pageNum.value,
        pageSize:pagePage.value,
        rname:uname.value
    }
}).then((res)=>{
    Roles.value=res.list
    total.value=res.total
    pagePages.value=res.pages
    pageSize.value=res.size
    console.log(pagePages.value)
    console.log("成功",res)
  }).catch((res)=>{
    console.log("失败",res)
  })
}   
// 查询按钮
function sleectLike(){
  //调用查询所有的角色信息方法
getALlROle();
}
//定义一个存储所有角色信息的数组
let Roles=ref()
//挂载完之后将所有角色信息渲染到表格中
onMounted(()=>{

//调用查询所有的角色信息方法
getALlROle();
})
//定义一个修改对象
let Role=ref({
     roleId:'',//角色ID角色名称
     roleName: '',//角色名称
    /**
     * 角色权限编码
     */
    roleCode:'',
    /**
     * 显示顺序
     */
      roleSort:'',
    /**
     * 备注
     */
      remark:'',
    /**
     * 角色状态（0正常 1停用）
     */
      status:'',
    /**
     * 创建时间
     */
      createTime:'',
    /**
     * 更新时间
     */
      updateTime:'',
    /**
     * 创建者
     */
      createBy:'',
    /**
     * 更新者
     */
      updateBy:'',
    /**
     * 删除标志（0代表存在 2代表删除）
     */
      delFlag:'',
})
//修改按钮点击事件
const handleEdit = (index: number, row) => {
  //打开抽屉
   drawer.value = true 
   //给修改对象赋值
   Role.value.roleId=row.roleId
   Role.value.roleName=row.roleName
   Role.value.remark=row.remark
   
}
// 修改，发送异步请求
function UpdateRole(){
  console.log(Role.value)
  //发送post请求
  http.post("/role/UpdateRole",Role.value).then((res)=>{
    if(res>0){
      //将文本框清空
      Role.value.roleId=Role.value.roleName=Role.value.remark=''
    //修改完成弹出修改成功提示框
    open1();
    //关闭抽屉
    drawer.value = false;
    //调用查询所有角色消息方法
    getALlROle();
    }else{
       //将文本框清空
      Role.value.roleId=Role.value.roleName=Role.value.remark=''
      //弹出修改失败提示框
      open2();
        //关闭抽屉
    drawer.value = false;
    //调用查询所有方法
    getALlROle();
    }
   
  })
}
//定义开启抽屉属性
const drawer2 = ref(false)
//添加角色方法
function addRole(){
  //开启抽屉
  drawer2.value=true;
  //清空文本框
   Role.value.roleId=Role.value.roleName=Role.value.remark=''
}


//添加确定按钮
function addRole2(){
  //判断数据合理性
  if(Role.value.roleName!='' && Role.value.remark!=''){
     //发送异步请求
  http.post("/role/addRole2",Role.value).then((res)=>{
    console.log("成功")
    open2A();
  }).catch(()=>{
    console.log("失败")
  })
  }else{
      open3();

  }
 
}
//默认选中复选框
let mids=ref([]);
//树状图控件
const defaultProps = {
  children: 'childMenuList',//值时是数据库的属性名
  label: 'menuName',
}

//点击授权确定按钮获取所有选中的复选框
import { ElTree } from 'element-plus'

const treeRef = ref<InstanceType<typeof ElTree>>()
  //确定按钮
  function addROleMenu(){
    console.log(treeRef.value!.getCheckedNodes(false, false))
    let checkMids=[]
   treeRef.value!.getCheckedNodes(false, false).forEach((menuNode)=>{
       //获取选中的菜单编号
       checkMids.push(menuNode.menuId)
       //如果当前节点是一个子菜单，添加父菜单编号
       if(menuNode.parentId!=0){
          checkMids.push(menuNode.parentId)
       }
   })
   //去重复父菜单编号
   checkMids=[...new Set(checkMids)]   
    //发送请求
      //发送异步请求对菜单进行修改
    // alert("rids="+checkMids)
  http.get("/role/addRoleMenu",{params:{rid:rid.value,mids:checkMids.toString()}})
  .then((res)=>{
    //mids.value=checkMids
    console.log("成功",res)
    //关闭抽屉
    drawer3.value=false;
    //弹出提示框
    open4();
  })
    console.log("编号",checkMids)
  }
// const getCheckedKeys = () => {

//   console.log("id",rid.value)
//   let Meuns2=treeRef.value!.getCheckedKeys(false)
//   //发送异步请求对菜单进行修改
//   http.get("/role/UpdateRoleMeus2",{params:{rid:rid.value,rids:treeRef.value!.getCheckedKeys(false).toString()}})
//   .then((res)=>{
//     console.log("成功",res)
//   })
// }
const handleChange = (value: number | undefined) => {
    console.log(value)
}
</script>
<template>
  <!-- 按钮 -->
  <div style="">
    <el-row>
      <el-col :span="8">
        <el-button type="success" class="inputMarging" @click="addRole"><el-icon>
            <CirclePlus />
          </el-icon>添加角色</el-button>
        <div class="grid-content ep-bg-purple" />
      </el-col>
      <el-col :span="8">

        <div class="grid-content ep-bg-purple-light" />
      </el-col>
      <el-col :span="8">
        <el-input v-model="uname" style="width: 240px" placeholder="请输入要查询的角色" clearable />
        <el-button type="primary" class="inputMarging" @click="sleectLike">查询</el-button>
        <div class="grid-content ep-bg-purple" />
      </el-col>
    </el-row>
  </div>
  <!-- 表格 -->
  <el-table :data="Roles" style="width: 80%;text-align: center;">
    <el-table-column fixed prop="roleId" label="编号" width="150" />
    <el-table-column prop="roleName" label="角色名称" width="160" />
    <el-table-column prop="remark" label="详细" width="240" />
    <el-table-column fixed="right" label="操作" min-width="160">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.$index, scope.row)">
          <el-button type="primary">授权菜单</el-button>
        </el-button>
        <el-button link type="primary" size="small"> <el-button type="success"
            @click="handleEdit(scope.$index, scope.row)">修改</el-button></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="example-pagination-block" style="margin-top: 20px;">
    <el-row type="flex" justify="center"><el-col :span="12" :offset="6">
        <el-pagination v-model:current-page="pageNum" background :page-size="pagePage" layout="total, prev, pager, next"
          :total="total" @current-change="handleCurrentChange" />
      </el-col></el-row>

  </div>
  <!-- 修改角色信息 -->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <span>修改角色信息</span>
    <br>
    <br>
    角色<input type="" v-model="Role.roleName" class="inputtext">
    <br>
    详细 <input type="" class="inputtext" v-model="Role.remark">
    <!-- 按钮 -->
    <div>
      <el-button type="primary" @click="UpdateRole">修改</el-button>
      <el-button type="danger">关闭</el-button>
    </div>
  </el-drawer>
  <!-- 添加用户抽屉 -->
  <el-drawer v-model="drawer2" title="I am the title" :with-header="false">
    <span>添加角色</span>
    <br>
    <br>
    角色名称<input type=""  v-model="Role.roleName" class="inputtext">
    <br>
    权限编码 <input type="" class="inputtext" v-model="Role.roleCode">
    <br>
    显示顺序 <el-input-number v-model="Role.roleSort"  :min="1" style="width: 200px;"  :max="10" @change="handleChange" />
    <br>
    状态    <el-radio-group v-model="Role.status">
      <el-radio value="0">正常</el-radio>
      <el-radio value="1">停用</el-radio>
    </el-radio-group>
    <br>
    备注 <input type="" class="inputtext" v-model="Role.remark">
    <!-- 按钮 -->
    <div>
      <el-button type="primary" @click="addRole2">添加</el-button>
      <el-button type="danger">关闭</el-button>
    </div>
  </el-drawer>
  <!-- 角色分配菜单抽屉 -->
  <el-drawer v-model="drawer3" title="分配角AA色" :with-header="false">
    <h1>分配菜单</h1>
    <!-- 树状图Tree -->
    <el-tree ref="treeRef" style="max-width: 600px" :data="menuData" show-checkbox node-key="menuId" default-expand-all
    :default-checked-keys="mids" :props="defaultProps" />
    <!-- 按钮 -->
    <div>
      <el-button type="primary" class="inputtext" @click="addROleMenu">确定</el-button>
      <el-button class="inputtext">取消</el-button>
    </div>
  </el-drawer>
</template>
<!-- 样式 -->
<style scoped>
.inputMarging{
    margin: 5px ;
}
/* 分页样式 */
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
/* 文本框间隔 */
.inputtext{
  margin: 10px;
}
</style>